<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<?php include "../pub/meta.html";?>
<title>imgtext-horizontal</title>
<?php include "../pub/head-cssjs.html";?>
<link rel="stylesheet" type="text/css" href="imgtext-horizontal.css">
</head>
<body>
<div class="page layout-lm">
<?php include "../pub/top-bar.html";?>
  <div class="wrap-container">
    <div id="container" class="clearfix">
      <div id="aside_first" class="aside">
        <div class="inner-aside">
            <?php include "../pub/asidenav-common-design-block.html";?>
        </div>
      </div>
      <div id="main">
        <div class="inner-main">
          <div id="imgtext_horizontal_page">
            <h2>单个图文混排，一般出现在详细页</h2>
            <div class="imgtext-h">
              <a href="#" class="img-left"><img src="images/img250-160.jpg" alt=""></a>
              <div class="text-right">
                <h3><a href="#" title="青，取之于蓝，而青于蓝；冰，水为之，而寒于水。">标题名称</a></h3>
                <p>时间：2013-06-08</p>
                <p>地点：海珠区新港西路135号中大科技园</p>
              </div>
            </div>
            <h2>图文混排列表</h2>
            <ul class="imgtext-h-list">
              <li>
                <a href="#" class="img-left"><img src="images/img250-160.jpg" alt=""></a>
                <div class="text-right">
                  <h3><a href="#" title="青，取之于蓝，而青于蓝；冰，水为之，而寒于水。">青，取之于蓝，而青于蓝；冰，水为之，而寒于水。</a></h3>
                  <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p>
                </div>
              </li>
              <li>
                <a href="#" class="img-left"><img src="images/img250-160.jpg" alt=""></a>
                <div class="text-right">
                  <h3><a href="#" title="青，取之于蓝，而青于蓝；冰，水为之，而寒于水。">青，取之于蓝，而青于蓝；冰，水为之，而寒于水。</a></h3>
                  <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p>
                </div>
              </li>
              <li>
                <a href="#" class="img-left"><img src="images/img250-160.jpg" alt=""></a>
                <div class="text-right">
                  <h3><a href="#" title="青，取之于蓝，而青于蓝；冰，水为之，而寒于水。">青，取之于蓝，而青于蓝；冰，水为之，而寒于水。</a></h3>
                  <p>故不登高山，不知天之高也；不临深溪，不知地之厚也；不闻先王之遗言，不知学问之大也。干、越、夷、貉之子，生而同声，长而异俗，教使之然也。诗曰：“嗟尔君子，无恒安息。靖共尔位，好是正直。神之听之，介尔景福。”神莫大于化道，福莫长于无祸。</p>
                </div>
              </li>
            </ul>
            <h2>区块类型图文混排，一般标题限制在一行，超出省略号</h2>
            <ul class="imgtext-h-block clearfix">
              <li class="first">
                <a href="#" class="img-left" target="_blank"><img width="50" height="50" alt="应用名称" src="images/img50.jpg"></a>
                <div class="text-right">
                    <h3 class="short-title"><a title="会飞的夏天" href="#">会飞的夏天会飞的夏天</a></h3>
                    <p class="birth-day">（07-22）</p>
                    <p><a class="send-btn" href="#">赠送礼物</a></p>
                 </div>
               </li>
               <li>
                <a href="#" class="img-left" target="_blank"><img width="50" height="50" alt="应用名称" src="images/img50.jpg"></a>
                <div class="text-right">
                    <h3 class="short-title"><a title="会飞的夏天" href="#">会飞的夏天会飞的夏天</a></h3>
                    <p class="birth-day">（07-22）</p>
                    <p><a class="send-btn" href="#">赠送礼物</a></p> 
                 </div>
               </li>
               <li class="last">
                <a href="#" class="img-left" target="_blank"><img width="50" height="50" alt="应用名称" src="images/img50.jpg"></a>
                <div class="text-right">
                    <h3 class="short-title"><a title="会飞的夏天" href="#">会飞的夏天会飞的夏天</a></h3>
                    <p class="birth-day">（07-22）</p>
                    <p><a class="send-btn" href="#">赠送礼物</a></p>       
                 </div>
               </li>
            </ul>
          </div>
        </div>
      </div><!--main-->
    </div>
  </div><!--wrap-container-->
<?php include "../pub/footer.html";?>
</div>  
</body>
</html>
